<template>
	<div style="font-size: 18px;">
		<uni-card v-if="seatTable" style="border-radius: 50px;margin: 0;">
			<uni-row style="text-align: center;">
				<uni-col v-for="col in seatTable.cols+1" :span="Math.floor(24/(seatTable.cols+1))" :key="col+1000">
					<span style="color: #aaaaaa;font-size: 19px;">{{col-1}}</span>
					<div v-if="seatTable.cols%2==0">
						<p v-if="col-1==seatTable.cols/2" style="text-align: right;">屏幕</p>
						<p v-if="col-2==seatTable.cols/2" style="text-align:left;">中央</p>
					</div>
					<div v-else>
						<p v-if="col-1==seatTable.cols/2">屏幕</p>
					</div>
				</uni-col>
			</uni-row>
			<uni-row v-for="row in seatTable.rows" :key="row+100" style="text-align: center;">
				<uni-col :span="Math.floor(24/(seatTable.cols+1))"><span
						style="color: #aaaaaa;font-size: 19px;">{{row}}</span></uni-col>
				<uni-col v-for="col in seatTable.cols" :span="Math.floor(24/(seatTable.cols+1))" :key="col+1000">
					<div @click="select(row,col)">
						<uni-icons :color="getColor(row,col)" :size="size+9" v-if="getNum(row,col)=='1'" type="circle"
							style="cursor: pointer;">
						</uni-icons>
						<uni-icons :color="getColor(row,col)" :size="size+9" v-if="getNum(row,col)=='2'" type="qq"
							style="cursor: pointer;">
						</uni-icons>
						<uni-icons :color="getColor(row,col)" :size="size+9" v-if="getNum(row,col)=='4'" type="qq"
							style="cursor: pointer;">
						</uni-icons>
						<uni-icons :size="size+9" v-if="getNum(row,col)=='6'" type="clear">
						</uni-icons>
						<span v-else>&nbsp</span>
					</div>
				</uni-col>
			</uni-row>
			<uni-row>
				<uni-col :span="24" style="text-align: center;">
					<span>
						<uni-icons color="#00aa00" type="qq" size="25"></uni-icons>已选
					</span>
					<span>
						<uni-icons color="#b61c1c" type="qq" size="25"></uni-icons>已售
					</span>
					<span>
						<uni-icons color="#aaaaaa" type="circle" size="25"></uni-icons>可选
					</span>
					<span>
						<uni-icons type="clear" size="25"></uni-icons>不可选
					</span>

				</uni-col>
			</uni-row>
		</uni-card>
		<uni-card v-if="orderList.length" style="border-radius: 20px;margin: 20px auto;">
			<uni-row>
				<uni-col :span="8" v-for="(item,index) in orderList">
					<uni-card>
						<span style="font-size: 20px;">{{item.row}}排 {{item.col}}座</span>
					</uni-card>
				</uni-col>
				<uni-col :span="24">
					<button type="primary" @click="submit"> 确认座位</button>
				</uni-col>
			</uni-row>
		</uni-card>
	</div>
</template>

<script setup lang="ts">
	import utils from '../../../utils'
	import SeatTable from '../../../components/SeatTable.vue'
	import api from '../../../api/api'
	import {
		ref,
		onMounted
	} from 'vue'
	const props = defineProps()
	const sessionId = ref()
	const sessionInfo = ref()
	const seatTable = ref()
	const size = ref(18)
	const orderList = ref([])
	onMounted(() => {
		sessionId.value = props.sessionId
		getSession()
	})
	const getSession = () => {
		api.session.getSessionById({
			sessionId: sessionId.value
		}).then(res => {
			if (res.data.code == 0) {
				sessionInfo.value = res.data.data.info
				seatTable.value = sessionInfo.value.seatTable
			}
		})
	}

	const getNum = (row: number, col: number) => {
		return seatTable.value.table.charAt((row - 1) * seatTable.value.cols + (col - 1))
	}
	const getColor = (row: any, col: any) => {
		let num = getNum(row, col)
		if (num == 1) {
			return '#aaaaaa'
		} else if (num == 2) {
			return '#b61c1c'
		} else if (num == 4) {
			return '#00aa00'
		}
	}
	const select = (row: number, col: number) => {
		console.log(row, col)
		if (seatTable.value.table[(row - 1) * seatTable.value.cols + (col - 1)] == 1) {
			seatTable.value.table = utils.replaceStr(seatTable.value.table, (row - 1) * seatTable.value.cols + (col -
					1),
				'4')
			orderList.value.push({
				row: row,
				col: col
			})
		} else if (seatTable.value.table[(row - 1) * seatTable.value.cols + (col - 1)] == 4) {
			seatTable.value.table = utils.replaceStr(seatTable.value.table, (row - 1) * seatTable.value.cols + (col -
					1),
				'1')
			orderList.value.forEach(function(item, index) {
				if (item.row == row && item.col == col) {
					orderList.value.splice(index, 1)
				}
			})
		}
		console.log(orderList.value)

	}
	const submit = () => {
		uni.setStorage({
			key: 'order',
			data: {
				sessionInfo: sessionInfo.value,
				orderList: orderList.value
			},
			success: function() {
				console.log('success')
			}
		})
		uni.navigateTo({
			url: '/pages/film/films/filmOrder'
		})
	}
</script>

<style scoped>


</style>
